<template>
<!-- isible.sync="dialogVisible控制显示还是隐藏 center居中
label-position="left"靠左-->
    <el-dialog class="header"
  title="用户注册"
  :visible.sync="dialogVisible"
  width="600px"
  center
  :before-close="handleClose">
 <el-form :model="form" :rules="rules" ref="form" label-width="70px" label-position="left">
      <!-- 上传图片 -->
 <el-form-item label="头像" prop="avatar">
   <!-- :action头像上传的服务器地址,跟axios无关,所以路径要写全
   :show-file-list是否展示上传成功后的列表
   :on-success上传成功后要执行的方法(图像预览/把后台返回的上传地址赋值给avatar[imageUrl])
   before-upload上传之前要执行的方法(检测大小和类型/携带上需要的额外参数imageObj)
   :data上传时附带的额外参数 -->
  <el-upload
  class="avatar-uploader"
  :action="uploadUrl"
  :data="imageObj"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
  >
  <img  v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
 </el-form-item>
  <el-form-item label="昵称" prop="username">
  <el-input v-model="form.username"></el-input>
</el-form-item>
 <el-form-item label="邮箱" prop="email">
<el-input v-model="form.email"></el-input>
</el-form-item>
 <el-form-item label="手机" prop="phone">
<el-input v-model="form.phone"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
    <el-row>
          <el-col :span="16">
            <el-form-item label="图形码" prop="code">
              <el-input v-model="form.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col style="margin-left:10px;" :span="7">
            <img
              @click="getCode"
               style="width:100%;height:40px;"
              :src="codeChange"
              alt=""
            />
          </el-col>
        </el-row>
           <el-row>
          <el-col :span="16">
            <el-form-item label="验证码" prop="rcode">
              <el-input v-model="form.rcode"></el-input>
            </el-form-item>
          </el-col>
          <el-col style="margin-left:10px;" :span="7">
           <el-button style="width:150px;" @click='getRcode'>获取验证码</el-button>
          </el-col>
        </el-row>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="register">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
export default {
  data () {
    return {
      // 和action绑定
      uploadUrl: process.env.VUE_APP_BASEURL + '/uploads', // 上传图片的地址
      imageUrl: '', // 预览图片的地址
      imageObj: {
        image: null // 额外带的参数,在下面上传前要赋值图片
      },
      codeChange: process.env.VUE_APP_BASEURL + '/captcha?type=sendsms',
      rcodeChange: '',
      dialogVisible: false,
      form: {
        avatar: '', // 上传图片
        username: '',
        email: '',
        phone: '',
        password: '',
        code: '', // 图形验证码
        rcode: '' // 验证码
      },
      rules: {
        avatar: [{ required: true, message: '图像不能为空', trigger: 'blur' }], // 上传图片
        username: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
        phone: [{
          required: true,
          validator: (rules, value, callback) => {
            if (!value) return callback(new Error('手机号不能为空'))
            // 正则判断手机号格式
            const res = /^1[3456789][0-9]{9}$/
            if (!res.test(value)) return callback(new Error('手机号不合法'))
            // 完全正确返回
            callback()
          },
          trigger: 'blur'

        }],
        email: [{
          required: true,
          validator: (rules, value, callback) => {
            if (!value) return callback(new Error('邮箱不能为空'))
            // 在下一行禁用eslint，类似上一种方法，只是写的位置不同罢了
            // eslint-disable-next-line
            const res = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
            if (!res.test(value)) return callback(new Error('邮箱号不合法'))
            // 完全正确返回
            callback()
          },
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        code: [{ required: true, message: '请输入图形码', trigger: 'blur' }], // 图形验证码
        rcode: [{ required: true, message: '请输入验证码', trigger: 'blur' }] // 验证码
      }
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.cancel()
        })
        .catch(_ => {})
    },
    // 图片上传后
    handleAvatarSuccess (res, file) { // 上传成功 res返回的结果 file上传的文件
      // console.log(res)
      if (res.code === 200) {
        this.imageUrl = URL.createObjectURL(file.raw)
        // 赋值给from.avatar
        this.form.avatar = res.data.file_path
        // console.log(this.form.avatar)
      }
    },
    beforeAvatarUpload (file) { // 上传前
    // 三种格式的图片都可以
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('上传头像图片不合法!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      // 给上传的图片额外的参数赋值
      this.imageObj.image = file
      return isImage && isLt2M
    },
    // 图形码点击刷新
    getCode () {
      this.codeChange = `${process.env.VUE_APP_BASEURL}/captcha?type=sendsms&tt=${new Date() - 0}`
    },
    // 获取验证码
    async getRcode () {
    // 声明一个变量判断手机号和图形码有没有填,是否报错,不报错+1
    // 有目标的验证一些表单validateField对部分表单字段进行校验的方法
    // Function(props: array | string, callback: Function(errorMessage: string))
    // Function:this.$refs.form.validateField
      let num = 0
      this.$refs.form.validateField(['phone', 'code'], errorMessage => {
        console.log(errorMessage)
        // 这里的业务逻辑是如果没报错就+1
        if (!errorMessage) {
          num++
        }
      })
      // phone和code都没有报错就会得到2发送请求
      // 注意await和async是成对使用的,aawait只能放在async函数里
      // 为什么要用await为了使我们的异步代码，更像同步的代码
      if (num === 2) {
        const res = await this.$axios.post('/sendsms', {
          code: this.form.code,
          phone: this.form.phone
        })
        // console.log(res)
        if (res.code === 200) {
          // 是form属性下的rcode所以是this.form.rcode
          this.form.rcode = res.data.captcha
        } else {
          this.$message.error(res.message)
          // 刷新图形码
          this.getCode()
        }
      }
    },
    // 注册请求
    register () {
      // 全部校验
      this.$refs.form.validate(async valid => {
        if (!valid) return
        const res = await this.$axios.post('/register', this.form)
        // console.log(res)
        if (res.code === 200) {
          // 提示注册成功
          this.$message.success('注册成功')
          // 清空表单里
          this.$refs.form.resetFields()
          // 清除上传的文件
          this.form.avatar = ''
          this.imageUrl = ''
          // 关闭当前页面
          this.dialogVisible = false
        } else {
          this.$message.error(res.message)
          // 刷新图形码
          this.getCode()
        }
      })
    },
    cancel () {
      // 重置表单
      console.log(this.form.avatar)
      // 清空表单里的上传文件
      this.form.avatar = ''
      this.imageUrl = ''
      this.$refs.form.resetFields()
      // 清空表单里的上传文件
      // this.imageUrl = ''
      // this.imageObj.image = null
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less">
.avatar-uploader {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px !important;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
